<template>
  <div>
    <div class="bgc">
      <div class="write_word">
        <span>写留言</span>
        <input type="text" v-model="wLeaveWord" /><el-button
          type="primary"
          @click="writeLeaveWord"
          :loading="loading"
          >提交</el-button
        >
      </div>
      <ul class="mes_list" v-if="leaveWord.length > 0">
        <li v-for="list in leaveWord" :key="list.mes_id">
          <div class="mes_photo">
            <img src="../assets/img/logo.png" alt="" />
            <span>{{ list.w_name }}</span>
          </div>
          <div class="mes_main">
            <p class="comment_me">
              {{ list.mes }}
            </p>
            <div>
              时间：{{ list.time }}
              <span
                v-if="!(userData.u_id == list.w_id )"
                class="click clickBtn"
                @click="openWriteReply(list.mes_id)"
                >回复</span
              >
              <span v-if="userData.u_id == list.w_id  == 1">我的</span>
            </div>
          </div>
        </li>
      </ul>
      <div v-if="leaveWord.length == 0">没有其他留言快写留言吧！</div>
    </div>
    <el-dialog title="写留言" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="留言">
          <el-input v-model="form.leaveWord" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelWriteReply">取 消</el-button>
        <el-button type="primary" @click="writeReply">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      loading: false,
      leaveWord: [],
      wLeaveWord: "",
      dialogFormVisible: false,
      leaveWordProjectId: -1,
      form: {
        leaveWord: "",
        toId: "",
      },
      userData:{}
    };
  },
  name:'LeaveWord',
  props: ["worksData"],
  created(){
    this.userData = JSON.parse(localStorage.getItem("token")||'{}');
      var id=this.worksData.id;
      var type=this.worksData.type;
      this.getLeaveWord(id,type);
      
  },
  methods: {
    getLeaveWord(id,type) {
        axios.post(`http://localhost:3000/information/getLeaveWord`,{
            id,type
        }).then((ret) => {
            this.leaveWord=ret.data.LeaveWord
        })
    },
    writeLeaveWord() {
      if (this.wLeaveWord == "") {
        this.$message({
          showClose: true,
          message: "留言不能为空！！",
          type: "error",
        });
      } else {
        this.loading = true;
        var myDate = new Date();
        var time=myDate.toLocaleString( ); 
        var timestamp=(Date.parse(myDate)+'').substring(0,10);
        axios
          .post(`http://localhost:3000/information/writeLeaveWord`, {
            w_id:this.userData.u_id,
            w_main: this.wLeaveWord,
            w_type: this.worksData.type,
            w_to: this.worksData.id,
            time,
            timestamp
          })
          .then((ret) => {
            if (ret.data.code == 1) {
              this.loading = false;
              this.$message({
                showClose: true,
                message: "留言成功",
                type: "success",
              });
              this.wLeaveWord = "";
              this.getLeaveWord(this.worksData.id,this.worksData.type);
            }
          });
      }
    },
    cancelWriteReply() {
      this.dialogFormVisible = false;
      this.form.leaveWord = "";
    },
    openWriteReply(id1) {
      this.dialogFormVisible = true;
      this.form.toId = id1;
    },
    writeReply() {
      if (this.form.leaveWord == "") {
        this.$message({
          showClose: true,
          message: "回复不能为空！！",
          type: "error",
        });
      } else {
        var myDate = new Date();
        var time=myDate.toLocaleString( ); 
        var timestamp=(Date.parse(myDate)+'').substring(0,10);
        axios
          .post(`http://localhost:3000/information/writeLeaveWord`, {
            w_id:this.userData.u_id,
            w_main: this.form.leaveWord,
            w_type: 2,
            w_to: this.form.toId,
            time,
            timestamp
          })
          .then((ret) => {
            if (ret.data.code == 1) {
              this.$message({
                showClose: true,
                message: "回复成功",
                type: "success",
              });
              this.cancelWriteReply();
            }
          });
      }
    },
  },
};
</script>

<style scoped>
.write_word {
  margin: 20px;
}
.write_word span {
  font-size: 18px;
  margin-right: 20px;
}
.write_word input {
  width: 600px;
  height: 38px;
  color: #606266;
  font: 18px/38px "";
  padding-left: 10px;
  margin-right: 20px;
  border: 1px solid #409eff;
  border-radius: 5px;
}
.mes_photo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20px;
}
.mes_photo > span {
  font-weight: 700;
  color: #303133;
}
.mes_photo > img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid #409eff;
}
.mes_list {
  height: 91%;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 10px 20px;
  background-color: #fff;
}
.mes_list > li {
  display: flex;
  margin: 30px 0;
  justify-content: left;
}
.mes_main {
  width: 75%;
  color: #606266;
  padding-bottom: 30px;
  border-bottom: 1px solid #dcdfe6;
}
.mes_main > div {
  font-size: 12px;
  color: #909399;
}
.mes_main > div > span {
  margin: 0 10px;
  padding: 3px 10px;
  border-radius: 20px;
  color: white;
  background-color: #409eff;
}
.mes_main > div > span:last-of-type {
  background-color: #f56c6c;
}
.comment_me {
  width: 80%;
  margin-bottom: 20px;
  text-indent: 2em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.my_comment {
  width: 100px;
  height: 100%;
  font-size: 14px;
  color: #909399;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mes_main > div > span.clickBtn {
  background: #409eff;
}
img{
    width: 100%;
    height: 100%;
}
</style>
